<template>
  <div class="container">
    <div>安装地址: npm install vue-qr --save</div>
    <div class="link">
      二维码文档链接
      <a
        href="https://www.cnblogs.com/xiaohuasan/p/11811902.html"
        target="_blank"
      >https://www.cnblogs.com/xiaohuasan/p/11811902.html</a>
    </div>
    <div class="code">

      <div class="code-padding">
        <div class="code-padding">
          <el-input
            v-model="codeUrl"
            placeholder="请输入二维码链接"
          ></el-input>
        </div>
        <el-button
          type="primary"
          @click="codeFn"
        >生成二维码</el-button>
      </div>

      <vue-qr
        ref="codeImg"
        :size="191"
        :margin="0"
        :auto-color="true"
        :dot-scale="1"
        :text="appUrl"
      />
      <div class="code-padding">
        <el-button
          type="primary"
          @click="downloadImg"
        >下载二维码</el-button>
      </div>
    </div>

    <div class="code-padding">复制</div>
    <div class="code-padding">
      <div class="code-padding">
        <el-input
          v-model="input"
          placeholder="请输入复制内容"
        ></el-input>
      </div>
      <el-button
        type="primary"
        @click="copy"
      >复制内容</el-button>
    </div>
  </div>
</template>

<script>
import VueQr from "vue-qr";
export default {
  components: {
    VueQr
  },
  data () {
    return {
      codeUrl: "",
      appUrl: "https://www.baidu.com",
      input: ""
    };
  },
  methods: {
    downloadImg () {
      const iconUrl = this.$refs.codeImg.$el.src;
      let a = document.createElement("a");
      let event = new MouseEvent("click");
      a.download = "二维码";
      a.href = iconUrl;
      a.dispatchEvent(event);
    },
    copy (data) {
      const $this = this;
      let oInput = document.createElement("input");
      oInput.value = $this.input;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success"
      });
    },
    codeFn () {
      this.appUrl = this.codeUrl;
    }
  }
};
</script>

<style scoped lang="scss">
.code {
  padding: 30px;
}
.code-padding {
  padding: 10px 0;
}
</style>
